<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线购物</title>
</head>
<body>
<style>
    div>p{
        margin-right: 100px;
    }
    div>div{
        display: flex;
        height: 35px;
    }
</style>
<h1>商品列表</h1>
<div>
    <div id="interval" style="color: red">
        当前时间
    </div>

    <div id="head">
        <p>商品ID</p>
        <p>商品名</p>
        <p>商品价格</p>
        <p>商品介绍</p>
    </div>


</div>
<div id="content" style="margin-bottom: 20px">

</div>
<hr>
<h1>购物车</h1>
<table border="1" cellpadding="11" >
    <th width="60px"><p style="color: red">商品ID</p></th>
    <th width="60px"><p style="color: red">商品名</p></th>
    <th width="70px"><p style="color: red">商品价格</p></th>
    <th width="320px"><p style="color: red">商品介绍</p></th>
    <tr>
        <td>1</td>
        <td>牛肉面</td>
        <td>20.8</td>
        <td>康师傅牌子的</td>
    </tr>
</table>
</body>
<script>
    //创建商品对象添加购物车方法
    function addGoods(id,name,price,introduce) {
        let s = new Object();
        s.id = id;
        s.name = name;
        s.price = price;
        s.introduce = introduce;
        return s;
    }

    let goods = []; //创建商品数组,存放商品对象
    //在商品列表中存放商品对象
    goods.push(addGoods(1,"洗发水",19.8,"飘柔洗发水,嘎嘎好用"));
    goods.push(addGoods(2,"方便面",3.8,"康师傅牛肉面,嘎嘎香"));
    goods.push(addGoods(3,"围巾",11.8,"羊毛围巾,嘎嘎暖和"));
    goods.push(addGoods(4,"大哥大",1288.8,"80年代大哥大,嘎嘎好用"));
    goods.push(addGoods(5,"泡泡糖",1.5,"旺仔泡泡糖"));
    function showGoods(){
        let content = document.getElementById("content");
        content.innerHTML = "";
        for(let i = 0;i<goods.length;i++){
            //将商品对象通过js显示到页面上
            let line_1 = "<div id=\""+goods[i].id+"\" >";
            let line_2 = "<p>"+goods[i].id+"</p>";
            let line_3 = "<p>"+goods[i].name+"</p>";
            let line_4 = "<p>"+goods[i].price+"</p>";
            let line_5 = "<p>"+goods[i].introduce+"</p>";
            let line_6 = "<p><input type='button' name=\""+goods[i].id+"\" onclick='addCart(this);' value='添加'/></p>";
            let line_7 = "</div>"
            let res = line_1+line_2+line_3+line_4+line_5+line_6+line_7;
            content.innerHTML = content.innerHTML + res;
        }
    }

    showGoods();
    //使用定时器自动刷新
    setInterval("getTime();",1000);
    function getTime(){
        document.getElementById("interval").innerText = new Date().toTimeString()
    }

    //添加到购物车
    function addCart(event){
        event.setAttribute("disabled","disabled"); //设置禁止使用
        let id = Number(event.name)-1; //获取点击的商品ID索引
        let tr = document.createElement("tr");　//创建表格
        for(let i = 0;i<4;i++){
            let td = document.createElement("td");
            tr.append(td);
        }
        //修改创建表格中的文本内容
        tr.getElementsByTagName("td")[0].innerText = goods[id].id;
        tr.getElementsByTagName("td")[1].innerText = goods[id].name;
        tr.getElementsByTagName("td")[2].innerText = goods[id].price;
        tr.getElementsByTagName("td")[3].innerText = goods[id].introduce;
        //插入当前页面
        document.getElementsByTagName("tbody")[0].appendChild(tr);
    }
</script>
</html>